<template>
    <div class="inner-warp">
        <MainTitleVue title="论文简介" />
        <div class="sub-warp">
            <!-- 类型栏 -->
            <div class="type-bar">
                <n-button
                    round
                    size="small"
                    color="#825CF7"
                    ghost
                    class="share-button"
                    @click="copyLink"
                    :data-clipboard-text="shareLink"
                >
                    <template #icon>
                        <n-icon>
                            <share-outline />
                        </n-icon>
                    </template>
                    分享
                </n-button>
                <n-button
                    round
                    size="small"
                    color="#FFBB1C"
                    :ghost="!paper_data.is_collected"
                    @click="starPaper"
                >
                    <template #icon>
                        <n-icon>
                            <star-outline />
                        </n-icon>
                    </template>
                    {{ paper_data.is_collected ? "已收藏" : "收藏" }}
                </n-button>
            </div>
            <n-divider style="width: 0;" />
            <!-- 标题 -->
            <n-h1>{{ paper_data.title }}</n-h1>
            <n-divider />
            <!-- 作者 -->
            <div class="detail-bar">
                <span style="font-weight: bold;">作者：</span>
                <div v-for="(item, index) in paper_data.author" :key="'author' + index">
                    <n-text v-if="index !== 0" style="white-space: nowrap;">&nbsp;,&nbsp;</n-text>
                    <n-text
                        underline
                        @click="toAuthor((item as any).id)"
                        style="cursor: pointer;white-space: nowrap;"
                    >{{ (item as any).name }}</n-text>
                </div>
            </div>
            <n-divider />
            <!-- 机构 -->
            <div class="detail-bar">
                <span style="font-weight: bold;">期刊/会议：</span>
                <div v-for="(item, index) in paper_data.venue" :key="'author' + index">
                    <n-text v-if="index !== 0" style="white-space: nowrap;">&nbsp;,&nbsp;</n-text>
                    <n-text
                        underline
                        @click="toVenue((item as any).id)"
                        style="cursor: pointer;white-space: nowrap;"
                    >{{ (item as any).name }}</n-text>
                </div>
            </div>
            <n-divider />
            <!-- 发布时间 -->
            <div class="detail-bar">
                <span style="font-weight: bold;">发布时间：</span>
                <n-text underline>{{ paper_data.year }}</n-text>
            </div>
            <n-divider />
            <!-- 下载和引用信息 -->
            <div style="float: left;">
                <n-icon size="25" color="#0077C2">
                    <quote-icon />
                </n-icon>
                <n-text class="download-quote" style="color:#0077C2">{{ paper_data.quote_time }}</n-text>
                <n-icon size="25" color="#651FFF" style="margin-left: 10px;">
                    <download-icon />
                </n-icon>
                <n-text class="download-quote" style="color:#651FFF">{{ paper_data.download_time }}</n-text>
            </div>
            <n-icon size="30" color="#EB5757" style="float: right;">
                <pdf-icon style="cursor: pointer;" @click="paperPreview" />
            </n-icon>

            <!-- 获取论文引用格式 -->
            <div style="float: right;">
                <n-icon size="25" color="#0077C2" @click="getPaperQuote();">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 24 24"
                    >
                        <g
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path d="M6 15h15" />
                            <path d="M21 19H6" />
                            <path d="M15 11h6" />
                            <path d="M21 7h-6" />
                            <path d="M9 9h1a1 1 0 1 1-1 1V7.5a2 2 0 0 1 2-2" />
                            <path d="M3 9h1a1 1 0 1 1-1 1V7.5a2 2 0 0 1 2-2" />
                        </g>
                    </svg>
                </n-icon>
            </div>
            <!-- 显示论文引用格式的窗口 -->
            <n-modal
                class="custom-card"
                v-model:show="showPaperQuote"
                preset="card"
                title="导出论文引用格式"
                style="width: 600px;"
                :bordered="false"
            >
                <n-text>{{ PaperQuoteText }}</n-text>
                <template #footer>
                    <n-button
                        class="copy-button"
                        :data-clipboard-text="PaperQuoteText"
                        @click="copyQuote"
                        color="#333333"
                    >复制</n-button>
                </template>
            </n-modal>
            <n-divider />
            <!-- 摘要 -->
            <div class="grey-container">
                <div class="grey-container-title">
                    <div></div>
                    <span>摘要</span>
                </div>
                <n-text>{{ paper_data.abstract }}</n-text>
            </div>
            <!-- 相关论文 -->
            <div class="grey-container">
                <div class="grey-container-title">
                    <div></div>
                    <span>相关论文</span>
                </div>
                <Related :pid="id" />
            </div>
            <!-- 评论 -->
            <Comment :pid="id"></Comment>
        </div>
    </div>
</template>

<script setup lang="ts">
import MainTitleVue from '@/components/common/MainTitle.vue'
import Comment from '@/views/paper/components/Comment.vue'
import Related from '@/views/paper/components/Related.vue'
import Clipboard from 'clipboard'
import { StarOutline as StarOutline, ShareSocialOutline as ShareOutline } from "@vicons/ionicons5"
import { FormatQuoteFilled as QuoteIcon, DownloadRound as DownloadIcon, PictureAsPdfRound as PdfIcon } from '@vicons/material'
import { useMessage } from 'naive-ui';
import { getCurrentInstance, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

// api访问代理
const { proxy } = getCurrentInstance() as any

// 引入路由
const router = useRouter()

// 引入消息函数
const message = useMessage()

// 获取论文id
const id = router.currentRoute.value.params.id

//显示论文引用格式模态框
let showPaperQuote = ref(false)
// 论文引用格式
let PaperQuoteText = ref("论文的引用格式")

const shareLink = "http://121.36.93.104/paper/intro/" + router.currentRoute.value.params.id

let paper_data = ref({
    //   标题
    title: "Hop Language: A Language Learning App Empowered by Deep Learning",
    //   作者
    author: [],
    //   期刊/会议
    venue: [],
    //   发布时间
    year: 2020,
    //   引用数
    quote_time: 43,
    //   下载数
    download_time: 532,
    //   下载链接
    download_link: "",
    //   摘要
    abstract: "",
    //   论文id
    id: '1',
    //   已收藏
    is_collected: false,
});

onMounted(() => {
    getPaperDetail()
})

// 获取论文简介
const getPaperDetail = (() => {
    proxy.$api.paper.getDetail({ id: id }).then((result: any) => {
        if (result.success) {
            paper_data.value = result.paper_data
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

// 收藏/取消论文收藏
const starPaper = (() => {
    proxy.$api.user.starPaper({ id: id }).then((result: any) => {
        if (result.success) {
            if (paper_data.value.is_collected) {
                message.success("取消收藏成功")
            } else {
                message.success("收藏成功")
            }
            paper_data.value.is_collected = !paper_data.value.is_collected
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

// 复制链接
const copyLink = (() => {
    let clipboard = new Clipboard('.share-button')
    clipboard.on('success', () => {
        message.success("已复制分享地址")
        clipboard.destroy()
    })
    clipboard.on('error', () => {
        message.error("复制地址失败，请重试")
        clipboard.destroy()
    })
})

//复制论文引用格式
const copyQuote = (() => {
    let clipboard = new Clipboard('.copy-button')
    clipboard.on('success', () => {
        message.success("已复制")
        clipboard.destroy()
    })
    clipboard.on('error', () => {
        message.error("复制失败，请重试")
        clipboard.destroy()
    })
})

// 跳转至学者页面
const toAuthor = ((id: string) => {
    if (id === "") {
        message.warning("抱歉，该学者暂未收录")
        return
    }
    router.push({ name: 'Author', params: { id: id } })
})

// 跳转至期刊页面
const toVenue = ((id: string) => {
    if (id === "") {
        message.warning("抱歉，该期刊暂未收录")
        return
    }
    router.push({ name: 'Journal', params: { id: id } })
})

// 论文预览
const paperPreview = (() => {
    let router_data = router.resolve({ name: "Preview", params: { id: id } })
    window.open(router_data.href, '_blank')
})

//导出论文引用格式
const getPaperQuote = (() => {
    showPaperQuote.value = true;
    proxy.$api.paper.paperQuote({ id: id }).then((result: any) => {
        if (result.success) {
            PaperQuoteText.value = result.txt;
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})


</script>

<style scoped>
.inner-warp {
    margin: 50px auto;
    height: 100%;
    width: 1100px;
}

.sub-warp {
    margin: 3% 13%;
}

.type-bar {
    font-weight: bold;
}

.type-bar :deep(.n-button) {
    float: right;
    margin-right: 10px;
}

.detail-bar {
    display: flex;
    flex-wrap: wrap;
}

.detail-bar :deep(.n-text) {
    color: #8d8a8a;
}

.download-quote {
    font-size: large;
}

.grey-container {
    background: #fafafa;
    padding: 4em 2em 3em 2em;
    margin-bottom: 30px;
}

.grey-container-title {
    display: flex;
    position: absolute;
    margin-top: -3em;
    margin-left: -2em;
    font-weight: bold;
}

.grey-container-title :deep(div) {
    background: #000;
    height: 20px;
    width: 10px;
    margin-right: 5px;
}
.copy-button {
    float: right;
}
</style>
